<template>
    <div  ref="scrollContainer">
      <div class="page-root" v-show="detailsShow">
        <BasePanel>
          <a-tabs class="tabs-wrap" v-model="tabIndex">
            <a-tab-pane key="0" tab="绑定达人">
                <TabView2 v-if="tabIndex === '0'"/>
            </a-tab-pane>
          
          </a-tabs>
        </BasePanel>
      </div>
     
    </div>
    
  </template>
  
  <script>
  import { mapState, mapActions } from 'vuex';
  import TabView2 from './tabView2';
  export default {
    components: {
        TabView2,
    },
    data() {
      return {
        tabIndex: '0',
      };
    },
    computed: {
      ...mapState('missionHall', ['detailsShow', 'task_uuid']),
    },
    methods: {
      ...mapActions('missionHall', ['setDetailsShow', 'setTaskUuid']),
      showDetails(id) {
        this.setTaskUuid(id);
        this.setDetailsShow(false);
      },
      hideDetails() {
        this.setDetailsShow(true);
        this.scrollToBottom();
      },
      scrollToBottom() {
        this.$nextTick(() => {
          const container = this.$refs.scrollContainer;
          console.log(container);
          
          if (container) {
            container.scrollTop = container.scrollHeight;
          }
        });
      },
      beforeLeave() {
        this.setDetailsShow(true);
      }
    },
    beforeDestroy() {
      this.beforeLeave();
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .BasePanel-root {
    padding: 10px 20px 20px;
    // height: 1080px; 
    // overflow-y: auto;
  }
  
  .tabs-wrap {
    margin-bottom: 10px;
  }
  
  .table-wrap {
    margin-top: 16px;
  }
  
  .table-top-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .table-title {
    flex: 1;
  
    span {
      line-height: 32px;
      font-weight: bold;
      font-size: 16px;
      display: flex;
      align-items: center;
  
      &::before {
        content: '';
        display: block;
        width: 3px;
        height: 18px;
        background-color: #1890ff;
        margin-right: 8px;
        position: relative;
        top: -1px;
      }
    }
  }
  
  .btn-gruop {
    display: flex;
    justify-content: flex-end;
  
    &>button {
      margin-left: 12px;
  
      &:first-child {
        margin-left: 0;
      }
    }
  }
  </style>
  